<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>test</title>
	<style type="text/css">
.btn{
	cursor: pointer;
	text-decoration: none;
	color: black;
	padding-left:10px;
	padding-right: 10px;
	padding-top: 5px;
	padding-bottom:  5px;
}
.btn-hover,.btn:hover{
	background: black;
	color:white;
}
.borderb{
	border:solid 1px black;
}
.w5h5{
	width:500px;
	height:100px;
	display: black;
}
.mnauto{
	margin: auto;
}	

</style>

</head>
<body>
<div>request params
	<textarea class="w5h5 borderb mnauto">
{
  "action":"menu",
  "params":{
  		
  }
}
	</textarea>
</div>	
	<a href="javascript:void()"class="btn">request</a>
<div> response
	
	<textarea class="w5h5 borderb"></textarea>
</div>	
	<script type="text/javascript" data-main="js/main.js" src="js/lib/jquery-1.7.2.min.js"></script>
	<script type="text/javascript">

	$(".btn").on("click",function(){
		var model = JSON.parse($("textarea:first").val());
		$.ajax({
			url:"./json.do",
			type:"POST",
			data:JSON.stringify(model),
			dataType:"json",
			contentType:"text/json"
		}).then(function(data){
			$("textarea:last").val(JSON.stringify(data,4));
		});

	});
	</script>
</body>
</html>